import DatePicker from "components/antd-compatible/date-picker";
import React from 'react'
import CompactInput from 'components/compact-input'
import {Select, Input,  Form, InputNumber, Button} from 'antd';
import Chooser from 'components/chooser'
import Selector from 'components/selector';
import WrapFormItem from 'components/wrap-form-item'
const { Option } = Select;
const FormItem = Form.Item;

export default {
  key: 'compact-input',
  name: 'CompactInput 组合组件',
  author: '张然',
  description: '左3右7的合并组件，多用于左选择右其他的场景。',
  isExampleFull: false,
  api: [
    {
      title: 'API',
      data: [],
      description: '内部可以放置两个表单组件，如果内部个数不为两个则整个组件都不现实。'
    },
  ],
  example: [
    {
      title: '基础用法',
      description: '组合任意两个标准表单组件。',
      state: {

      },
      getMethod: context => {
        return {

        }
      },
      getContent: context => {
        const { } = context.state;
        return (
          <div>
            <CompactInput>
              <Select>
                <Option value='ALL'>全部</Option>
                <Option value='PART'>部分</Option>
              </Select>
              <Input/>
            </CompactInput>
            <br />
            <CompactInput>
              <Chooser
                type='user'
                valueKey="userOID"
                labelKey="fullName"/>
              <DatePicker/>
            </CompactInput>
            <br />
            <CompactInput>
              <Input/>
              <Selector type="setOfBooksByTenant"/>
            </CompactInput>
          </div>
        )
      }
    },
    {
      title: '表单使用',
      description: '与::WrapFormItem::组件集成使用能够十分容易完成联动效果。',
      state: {},
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='集成多个表单项' style={{ marginBottom: 12 }}>
              {getFieldDecorator('test')(
                <WrapFormItem>
                  {(onChange, value) => (
                    <CompactInput>
                      <Select
                        style={{ width: '100%' }}
                        onChange={currency => onChange({
                          currency,
                          amount: null
                        })}
                        value={value.currency}
                        placeholder='请选择'
                      >
                        {['CNY', 'USD', 'JPY'].map(item => <Option key={item}>{item}</Option>)}
                      </Select>
                      <InputNumber
                        onChange={amount => onChange({ amount })}
                        value={value.amount}
                        disabled={!value.currency}
                      />
                    </CompactInput>
                  )}
                </WrapFormItem>
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    }
  ]
}
